/*
  grasshopper.css
*/

.grasshopper .top-wrapper {
  padding: 5px 0px 5px 0px;
  margin: 0 0 10px 0;
}

/******************************************
 Widget

<div class="conversation">
<table>
  <tbody>
    <tr class="grasshopper">
      <td>Grasshopper</td>
      <td>What is that for, Master?</td>
    </tr>
    <tr>
      <td>Master</td>
      <td>Your Kung Fu practice timetable.</td>
    </tr>
  </tbody>
</table>
</div>
--------------------------------------- **/
.conversation table {
  text-align: left;
  height: 172px;
  width: 577px;
  padding: 2px;
  border-spacing: 3px;
  color: white; /*silver;*/
  font-size: 1.2em;
  line-height: 1.5em;
}
.conversation tr {
  height: 1.7em;
}
.conversation td:first-child {  /* 1st td */
  vertical-align: top;
  text-align: right;
  color: gold;
  font-weight: bold;
}
.conversation tr.grasshopper td:first-child { /* 1st id with class="grasshopper" */
  color: #00CC00;
}
.conversation td {  /* 1st td */
  width: 85px;
}
.conversation td + td { /* 2nd td */
  width: 474px;
}

